<template>
  <div class="local" v-if="!isDiv">
    <el-button type="primary" class="btn" @click="update">修改</el-button>
    <el-button type="success" class="btn" @click="watch">查看</el-button>
    <el-button type="danger" class="btn" @click="del">删除</el-button>
    <!--补充按钮slot-->
    <slot name="btn" />
  </div>
  <!--自定义操作-->
  <div class="div"  v-else>
    <!--默认slot-->
    <slot/>
  </div>
</template>
<script lang="ts" setup>
import {ElButton} from 'element-plus'
import { useSlots, inject } from 'vue'

export type ParamType = {
  value: string | number
}
const slots = useSlots()
const isDiv = slots.default ? true : false  // 是否是用户自定义操作 true是false否
// const props = defineProps({
//   params: {
//     type: Object as () => ParamType,  // 修改/删除操作携带的参数 如table_id
//     required: true
//   }
// })
const props = defineProps({
  params: {
    type: Object as () => any,  // 修改/删除操作携带的参数 如table_id
    required: true
  }
})
// 查看
const watch = () => {
  const detail = inject('detailCall') as Function
  if (detail) {
    detail.apply(props.params.value)
  }
}
// 修改
const update = () => {
  const update = inject('updateCall') as Function
  if (update) {
    update.apply(props.params.value)
  }
}
// 删除
const del = () => {
  // 删除提醒TD
  // 确认后删除
  const del = inject('delCall') as Function
  if (del) {
    del.apply(props.params.value)
  }
}
</script>
<style scoped lang="scss">
.btn {
  margin-right: 3px;
}
</style>




